<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/css/style.css" />
<style type="text/css">
.works{
	margin: 0 auto;
	width: 1000px;
}
.general{
	float: left;
	width: 24.7%;
	border: 1px solid gray;
}
.park_name{
	font-size:8px;
	text-align:center;  
	margin: 5px 0 0 0;
}
.coupons{
	font-size:8px;
	text-align:center;
}
.prompt{
	font-size:8px;
	text-align:center;
	margin: 0 0 5px 0;
}
#imgQRCODE{
	display:block;
	margin: 0 auto;
	width: 146px;
	height: 145.4px;
}
#count{
	width: 180px;
}

</style>

</head>
<body>
<input type="hidden" id="couponId" value="${couponId}">
<p align="center"><input type="number" id="count" placeholder="二维码数量(最多一次200张)" >
<button onclick="general()" style="width: 70px;">生成</button><button onclick="printdiv()" style="width: 70px;">打印</button></p>
<div class="works" id="works">
	
</div>
<!--请在下方写此页面业务相关的脚本--> 
<script type="text/javascript" src="${ctx}/static/plug/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/static/plug/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="${ctx}/static/plug/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="${ctx}/static/plug/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="${ctx}/static/plug/laypage/1.2/laypage.js"></script>

<script type="text/javascript">
function printdiv() {
	if(submission){
		layer.msg("二维码未生成完毕！")
		return;
	}
    var headhtml = "<html><head><title></title></head><body>";
    var foothtml = "</body>";
    // 获取div中的html内容
    // 获取div中的html内容，jquery写法如下
    var newhtml= $("#works").html();

    // 获取原来的窗口界面body的html内容，并保存起来
    var oldhtml = document.body.innerHTML;

    // 给窗口界面重新赋值，赋自己拼接起来的html内容
    document.body.innerHTML =newhtml;
    // 调用window.print方法打印新窗口
    window.print();

    // 将原来窗口body的html值回填展示
    document.body.innerHTML = oldhtml;
    return false;
}

var submission = false;
var couponNum = 0;
function general(){
	if(submission){
		return;
	}
	var count = $("#count").val();
	var couponId = $("#couponId").val();
	console.log(count);
	if(!count || count == 0){
		layer.msg("请设置二维码数量")
		return;
	}
	if(count > 200){
		layer.msg("二维码张数大于200张")
		return;
	}
	couponNum = count;
	$("#works").html("");
	setTimeout(generateSuccess, 1000);
	submission = true;
	for (var i = 0; i < count; i++) {
		$.ajax({
			type : "POST",
			url : "${ctx}/coupon/generalQRCode?couponId="+couponId,
			dataType : "json",
			success : function(obj) {
				console.log(obj);
				if(obj.result){
					var html = '<div class="general"><p class="park_name">'+ '${parkName}' +'</p><img id="imgQRCODE" src="data:image/jpg;base64,'+ obj.qrcodeStream+'" />' + 
						'<p class="coupons">'+ '${coupons}' +'</p><p class="prompt">'+ '${prompt}' +'</p></div>';
					$("#works").append(html);
				}else{
					
				}
			}
		});
		
	}	
	
}

function generateSuccess() {
    console.log($(".general").length + "  :   " + couponNum);
    if($(".general").length == couponNum){
        layer.msg("生成完毕！");
        submission = false;
        return;
    }
    setTimeout(generateSuccess, 1000);
}

</script>

</body>
</html>